<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>瀑布流分页</title>
<script type="text/javascript" src="js/waterfall.js"></script>
</head>
<body>
<div id="container">
<!-- 循环部分开始 -->
<{foreach item=water from=$water}>
<p><{$water.content}></p>
<{/foreach}>
<!-- 循环部分结束 -->
</div>
<script type="text/javascript">
var opt={
	getResource:function(index,render){//index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口进行渲染，如 render(elem)
		$.post(
			'ajax_waterfall.php',
			{index:index},
			function(data){
				$("#html").val("");
				var html = "";
				$.each(data,function(){
					html += '<div class="cell"><img src="img/'+this.id+'.jpg" /><p>'+this.id+'</p></div>';
				})
				$("#html").val(html);
			}
			,'json'
		)
		var html = $("#html").val();
		if(html!=''){
			return $(html);
		}
	},
	auto_imgHeight:true,
	insert_type:1
}

$('#container').waterfall(opt);
</script>
</body>
</html>